<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 改变内容为弹性容器布局-->
    display: flex;

    <!-- 改变主轴方向为垂直 可以将元素垂直放置 -->
    flex-direction: column;

    <!-- 翻转布局方向,从右往左放置 -->
    /* flex-direction: row-reverse; */

    <!-- /* 主轴对齐方式 */ -->
    /* justify-content: ; */

    居中显示
    justify-content: center;

    盒子左右
    每个盒子的左右边距一样,效果为盒子间距是盒子到父级边框间距两倍
    justify-content: space-around;

    盒子之间
    只是盒子间距一样,不包括父级边框
    /justify-content: space-between;

    /* 所有的间距均分,都一样 */
    justify-content: space-evenly;


    <!-- 侧轴对齐方式 -->
    侧轴
    align-items: ;

    侧轴居中
    align-items: center;

    侧轴子元素的高度拉伸为父元素高度,要将子元素高度去除
    align-items: stretch;

    调整弹性盒子内行对齐的对齐方式 (行间距)
    align-content:
    space-around
    space-between;
    space-evenly

    宽度不够的时候自动换行显示
    flex-wrap: wrap;


    <!-- 伸缩比 -->
    flex 表示将父元素剩余宽度分份,然后按份分剩余宽度
    加在子元素上
</body>

</html>